Landing page responsive layout conclusion

jamesperet 10 lat temu
rodzic
commit
8f3f83cce0

BIN
app/assets/images/logo_avalanche_mobile.png


+ 65 - 16
app/assets/javascripts/start.js

@@ -5,14 +5,16 @@ function attachHandler(jQuery) {
5 5
 		$('#obscure_header').css('height', ($('#photo_header').height()));
6 6
 		$('#obscure_header_mobile').css('height', ($('#photo_header_mobile').height()));
7 7
 		$('#obscure_subscribe').css('height', ($('#photo_subscribe').height()));	
8
+		$('#obscure_subscribe2').css('height', ($('#photo_subscribe2').height()));	
8 9
 		$('#myCarousel.carousel.slide').css('height', ($('#photo_header').height()));
9 10
 		$('#myCarousel2.carousel.slide').css('height', ($('#photo_header_mobile').height()));
10 11
 		$('#tagline_header').css('top', (($('#photo_header').height()/7)*-5));
11
-		$('#tagline_header_mobile').css('top', (($('#photo_header_mobile').height()/10)*-9));
12
+		$('#tagline_header_mobile').css('top', (($('#photo_header_mobile').height()/10)*-8));
12 13
 		$('#tagline_subscribe').css('top', (($('#photo_subscribe').height()/10)*-8));
14
+		$('#tagline_subscribe2').css('top', (($('#photo_subscribe2').height()/10)*-7));
13 15
 	});
14 16
 	
15
-	var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)+100;
17
+	var mainbottom = $('#myCarousel').height();
16 18
 	
17 19
 	// on scroll, 
18 20
 	$(window).on('scroll',function(){
@@ -30,45 +32,92 @@ function attachHandler(jQuery) {
30 32
 	// scroll to 'header'
31 33
 	$(".btn-logo").click(function() {
32 34
 	    event.preventDefault();
33
-	    $('html, body').animate({
34
-	        scrollTop: $("#myCarousel").offset().top
35
-	    }, 1000);
35
+	    doc_with = $(document).width();
36
+	    if (doc_with > 979) {
37
+	    		$('html, body').animate({
38
+			    scrollTop: $("#myCarousel").offset().top
39
+			}, 1000);
40
+		} else if (doc_with < 979 && doc_with > 780) {
41
+	    		$('html, body').animate({
42
+			    scrollTop: ($("#myCarousel").offset().top - 56)
43
+			}, 1000);
44
+		} else {
45
+	    		$('html, body').animate({
46
+			    scrollTop: ($("#myCarousel2").offset().top - 56)
47
+			}, 1000);
48
+		}
49
+	    
36 50
 	});
37 51
 	
38 52
 	// scroll to 'about'
39 53
 	$(".btn-about").click(function() {
40 54
 	    event.preventDefault();
41
-	    $('html, body').animate({
42
-	        scrollTop: ($("#about").offset().top - 150)
43
-	    }, 1000);
55
+	    doc_with = $(document).width();
56
+	    if (doc_with > 979) {
57
+		    $('html, body').animate({
58
+		        scrollTop: ($("#about").offset().top - 80)
59
+		    }, 1000);
60
+	    } else if (doc_with < 979 && doc_with > 780){
61
+		    $('html, body').animate({
62
+		        scrollTop: ($("#about").offset().top - 270)
63
+		    }, 1000);
64
+	    } else {
65
+		    $('html, body').animate({
66
+		        scrollTop: ($("#about").offset().top - 270)
67
+		    }, 1000);
68
+	    }
44 69
 	});
45 70
 	
46 71
 	// scroll to 'features'
47 72
 	$(".btn-features").click(function() {
48 73
 	    event.preventDefault();
49
-	    $('html, body').animate({
50
-	        scrollTop: ($("#features").offset().top - 50)
51
-	    }, 1000);
74
+	    doc_with = $(document).width();
75
+	    if (doc_with > 979) {
76
+		    $('html, body').animate({
77
+		        scrollTop: ($("#features").offset().top - 50)
78
+		    }, 1000);
79
+	    } else if (doc_with < 979 && doc_with > 780){
80
+		    $('html, body').animate({
81
+		        scrollTop: ($("#features").offset().top - 230)
82
+		    }, 1000);
83
+	    } else {
84
+		    $('html, body').animate({
85
+		        scrollTop: ($("#features2").offset().top - 230)
86
+		    }, 1000);
87
+	    }
52 88
 	});
53 89
 	
54 90
 	// scroll to 'subscribe'
55 91
 	$(".btn-subscribe").click(function() {
56 92
 	    event.preventDefault();
57
-	    $('html, body').animate({
58
-	        scrollTop: ($("#subscribe").offset().top)
59
-	    }, 1000);
93
+	    doc_with = $(document).width();
94
+	    if (doc_with > 979) {
95
+		    $('html, body').animate({
96
+		        scrollTop: ($("#subscribe").offset().top)
97
+		    }, 1000);
98
+	    } else if (doc_with < 979 && doc_with > 780){
99
+		    $('html, body').animate({
100
+		        scrollTop: ($("#subscribe").offset().top  - 100)
101
+		    }, 1000);
102
+	    } else {
103
+		    $('html, body').animate({
104
+		        scrollTop: ($("#subscribe2").offset().top  - 230)
105
+		    }, 1000);
106
+	    }
60 107
 	});
61 108
 	
62 109
 	$( window ).resize(function(){
63 110
 		$('#obscure_header').css('height', ($('#photo_header').height()));
64 111
 		$('#obscure_header_mobile').css('height', ($('#photo_header_mobile').height()));	
65
-		$('#obscure_subscribe').css('height', ($('#photo_subscribe').height()));	
112
+		$('#obscure_subscribe').css('height', ($('#photo_subscribe').height()));
113
+		$('#obscure_subscribe2').css('height', ($('#photo_subscribe2').height()));		
66 114
 		$('#myCarousel.carousel.slide').css('height', ($('#photo_header').height()));
67 115
 		$('#myCarousel2.carousel.slide').css('height', ($('#photo_header_mobile').height()));
68 116
 		var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)-10;
69 117
 		$('#tagline_header').css('top', (($('#photo_header').height()/7)*-5));
70
-		$('#tagline_header_mobile').css('top', (($('#photo_header_mobile').height()/10)*-9));
118
+		$('#tagline_header_mobile').css('top', (($('#photo_header_mobile').height()/10)*-8));
71 119
 		$('#tagline_subscribe').css('top', (($('#photo_subscribe').height()/10)*-8));
120
+		$('#tagline_subscribe2').css('top', (($('#photo_subscribe2').height()/10)*-7));
72 121
 	});
73 122
 };
74 123
 

+ 47 - 0
app/assets/stylesheets/start.css.less

@@ -214,10 +214,26 @@ p.footer a {
214 214
 	text-transform: underline;
215 215
 }
216 216
 
217
+h2.landing_page {
218
+	margin-bottom: 45px; 
219
+	margin-top: 35px;
220
+}
221
+
217 222
 @media (max-width: 979px) {
223
+	h2.landing_page {
224
+		font-size: 26px;
225
+		margin-top: 0px;
226
+	}
218 227
 	.navbar-fixed-top {
219 228
 		background-color: black;
220 229
 		margin-bottom: 0px;
230
+		position: fixed;
231
+		right: 0;
232
+		left: 0;
233
+		z-index: 1030;
234
+		margin-bottom: 0;
235
+		padding-right: 20px;
236
+		padding-left: 20px;
221 237
 	}
222 238
 	.navbar .btn-navbar {
223 239
 		float: right;
@@ -232,5 +248,36 @@ p.footer a {
232 248
 		background-color: rgba(0, 0, 0,0);
233 249
 		transition: all 0.25s ease;
234 250
 	}
251
+	p.mobile {
252
+		font-size: 21px;
253
+		font-style: italic;
254
+		text-align: center;
255
+	}
256
+	h1.mobile {
257
+		font-size: 55px;
258
+		text-transform: uppercase;
259
+		text-align: center;
260
+		line-height: 50px;
261
+	}
262
+	#myCarousel2 {
263
+		margin-top: 56px;
264
+	}
265
+	.navbar .nav > li > a:hover {
266
+		text-shadow: 0 0 0 #ffffff;
267
+		color: white;
268
+		background-color: gray;
269
+		//text-decoration: underline;
270
+	}
271
+	.navbar-inner.past-main {
272
+	    background-color: black;
273
+	    color:#444;
274
+	}
235 275
 }
236 276
 
277
+@media (max-width: 480px) {
278
+	.media .pull-left, .media .pull-right {
279
+		float: left;
280
+	}
281
+	
282
+	
283
+}

+ 7 - 6
app/views/layouts/landing_page.erb

@@ -45,18 +45,19 @@
45 45
     <nav class="navbar navbar-fixed-top">
46 46
       <div class="navbar-inner">
47 47
         <div class="container">
48
-          <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" style="margin-top: 13px;">
48
+          <a  class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" style="margin-top: 13px;">
49 49
             <span class="icon-bar"></span>
50 50
             <span class="icon-bar"></span>
51 51
             <span class="icon-bar"></span>
52 52
           </a>
53
-          <a class="btn-logo" href="/"><%= image_tag "logo_avalanche.png", class: 'brand', style: 'width: 250px;' %></a>
53
+          <a class="nav-responsive-link btn-logo hidden-phone" href="/"><%= image_tag "logo_avalanche.png", class: 'brand', style: 'width: 250px;' %></a>
54
+		<a class="nav-responsive-link btn-logo visible-phone" href="/"><%= image_tag "logo_avalanche_mobile.png", class: 'brand', style: 'height: 36px;' %></a>
54 55
           
55
-		<div class="container nav-collapse ">
56
+		<div id="close-responsive-menu" class="container nav-collapse ">
56 57
 		  <ul class="nav pull-right">
57
-		    <li><a class="btn-about" href="#about"><%= (t "landing_page.about").html_safe %></a></li>
58
-		    <li><a class="btn-features" href="#features"><%= (t "landing_page.features").html_safe %></a></li>
59
-		    <li><a class="btn-subscribe" href="#subscribe"><%= (t "landing_page.subscribe").html_safe %></a></li>
58
+		    <li><a class="nav-responsive-link btn-about" href="#about"><%= (t "landing_page.about").html_safe %></a></li>
59
+		    <li><a class="nav-responsive-link btn-features" href="#features"><%= (t "landing_page.features").html_safe %></a></li>
60
+		    <li><a class="nav-responsive-link btn-subscribe" href="#subscribe"><%= (t "landing_page.subscribe").html_safe %></a></li>
60 61
 		    <li><%= link_to (t "registration.sign_in"), new_user_session_path, class: "btn-login" %></li>
61 62
 			    
62 63
 	   		<% if user_signed_in? %>

+ 129 - 8
app/views/start/index.html.erb

@@ -32,8 +32,7 @@
32 32
 		  <div class="row">
33 33
 			  <div class="span12" style="height: 20px; padding-left: 20px; padding-right: 20px;">
34 34
 			       <div id="tagline_header_mobile" class="" style="background-color: transparent; position: relative; top: -700px;">
35
-			         <h1 class="header"><%= (t "landing_page.tagline").html_safe %></h1>
36
-			         <p class="lead header"><%= (t "landing_page.tagline_subtext").html_safe %></p>
35
+			         <h1 class="header mobile">Avalanche Network</h1>
37 36
 			    	  </div>
38 37
 		    	  </div>
39 38
 	       </div>
@@ -43,11 +42,12 @@
43 42
 </div><!-- /.carousel -->
44 43
 
45 44
 
45
+
46 46
 <div id="about" class="container" style="margin-top: 30px;">
47 47
 	<div class="row">
48 48
 		
49 49
 		<div class="span6">
50
-			<h2 style="margin-bottom: 45px; margin-top: 35px;"><%= (t "landing_page.about_title").html_safe %></h2>
50
+			<h2 class="landing_page"><%= (t "landing_page.about_title").html_safe %></h2>
51 51
 			<%= (t "landing_page.about_text").html_safe %>
52 52
 
53 53
 		</div>
@@ -58,7 +58,8 @@
58 58
 	</div>
59 59
 </div>
60 60
 
61
-<div id="features" class="container" style="margin-top: 60px;">
61
+<!-- FEATURES -->
62
+<div id="features" class="container hidden-phone" style="margin-top: 60px;">
62 63
 	<div class="row">
63 64
 		
64 65
 		<div class="span6">
@@ -137,9 +138,94 @@
137 138
 	</div>
138 139
 </div>
139 140
 
141
+<!-- FEATURES MOBILE -->
142
+
143
+<div id="features2" class="container visible-phone" style="margin-top: 60px;">
144
+	<div class="row">
145
+		
146
+		<div class="span6">
147
+			<h2 style="margin-bottom: 45px; margin-top: 35px;"><%= (t "landing_page.feature_headline_1").html_safe %></h2>
148
+			<p class="lead"><%= (t "landing_page.feature_text_1").html_safe  %></p>
149
+			
150
+			<div class="media">
151
+			  <span class="pull-left" href="#" style="">
152
+			    <%= image_tag "icons/icon_mission_64x64.png", class: 'media-object', style: 'width: 64px;' %>
153
+			  </span>
154
+			  <div class="media-body">
155
+			    <p class="lead"><%= (t "landing_page.feature_1_item_1").html_safe  %></p>
156
+			  </div>
157
+			</div>
158
+			<div class="media">
159
+			  <span class="pull-left" href="#">
160
+			    <%= image_tag "icons/icon_chat_64x64.png", style: 'width: 64px;' %>
161
+			  </span>
162
+			  <div class="media-body">
163
+			    <p class="lead"><%= (t "landing_page.feature_1_item_2").html_safe %></p>
164
+			  </div>
165
+			</div>
166
+			<div class="media">
167
+			  <span class="pull-left" href="#">
168
+			    <%= image_tag "icons/icon_task_64x64.png", style: 'width: 64px;' %>
169
+			  </span>
170
+			  <div class="media-body">
171
+			    <p class="lead"><%= (t "landing_page.feature_1_item_3").html_safe %></p>
172
+			  </div>
173
+			</div>
174
+			<div class="media">
175
+			  <span class="pull-left" href="#">
176
+			    <%= image_tag "icons/icon_diamond_64x64.png", style: 'width: 64px;' %>
177
+			  </span>
178
+			  <div class="media-body">
179
+			    <p class="lead"><%= (t "landing_page.feature_1_item_4").html_safe %></p>
180
+			  </div>
181
+			</div>
182
+			
183
+		</div>
184
+		<div class="span6">
185
+			<h2 style="margin-bottom: 45px; margin-top: 35px;"><%= (t "landing_page.feature_headline_2").html_safe  %></h2>
186
+			<p class="lead"><%= (t "landing_page.feature_text_2").html_safe  %></p>
187
+			
188
+			<div class="media">
189
+			  <span class="pull-left" href="#">
190
+			    <%= image_tag "icons/icon_mission_64x64.png", style: 'width: 64px;' %>
191
+			  </span>
192
+			  <div class="media-body">
193
+			    <p class="lead"><%= (t "landing_page.feature_2_item_1").html_safe %></p>
194
+			  </div>
195
+			</div>
196
+			<div class="media">
197
+			  <span class="pull-left" href="#">
198
+			    <%= image_tag "icons/icon_radar_64x64.png", style: 'width: 64px;' %>
199
+			  </span>
200
+			  <div class="media-body">
201
+			    <p class="lead"><%= (t "landing_page.feature_2_item_2").html_safe %></p>
202
+			  </div>
203
+			</div>
204
+			<div class="media">
205
+			  <span class="pull-left" href="#">
206
+			    <%= image_tag "icons/icon_gift_64x64.png", style: 'width: 64px;' %>
207
+			  </span>
208
+			  <div class="media-body">
209
+			    <p class="lead"><%= (t "landing_page.feature_2_item_3").html_safe %></p>
210
+			  </div>
211
+			</div>
212
+		</div>
213
+		
214
+	</div>
215
+	<div class="row" style="margin-top: 25px;">
216
+		
217
+		<div class="span6">
218
+			
219
+		</div>
220
+		<div class="span6">
221
+			
222
+		</div>
223
+	</div>
224
+</div>
140 225
 
226
+<!-- SUBSCRIBE -->
141 227
 
142
-<div id="subscribe" class="carousel slide" data-ride="carousel" style="height: 400px; margin-top: 60px;">
228
+<div id="subscribe" class="hidden-phone carousel slide" data-ride="carousel" style=" margin-top: 60px;">
143 229
 	 <div class="carousel-inner" role="listbox">
144 230
 	   <div class="item active">
145 231
 		<div class="obscure" id="obscure_subscribe" style="height: 970px;"></div>
@@ -156,7 +242,7 @@
156 242
 				    <%= bootstrap_form_for(@subscription) do |f| %>
157 243
 				      <%= f.alert_message "Please fix the errors below."%>
158 244
 				      <%= f.form_group :email, style: 'margin-top: -35px;' do %>
159
-				        	<%= f.text_field :email, hide_label: true, class: 'span4 input-large', required: true, style: 'height: 30px; font-size: 24px;' %>
245
+				        	<%= f.text_field :email, hide_label: true, value: 'Email', class: 'span4 input-large', required: true, style: 'height: 30px; font-size: 24px;' %>
160 246
 				      <% end %>
161 247
 				      <%= f.submit (t 'subscription.submit'), class: 'btn btn-large', id: 'submit_subscription' %>
162 248
 				    <% end %>
@@ -165,7 +251,42 @@
165 251
 	      </div>
166 252
           </div>
167 253
 	  </div>
168
-</div><!-- /.carousel -->
254
+  </div>
255
+</div>
256
+
257
+<!-- SUBSCRIBE MOBILE -->
258
+
259
+<div id="subscribe2" class="visible-phone carousel slide" data-ride="carousel" style="margin-top: 20px; margin-left: -20px; margin-right: -20px;">
260
+	 <div class="carousel-inner" role="listbox">
261
+	   <div class="item active">
262
+		<div class="obscure" id="obscure_subscribe2" style="height: 970px;"></div>
263
+	     <%= image_tag "photo_everest.jpg", id: 'photo_subscribe2', style: 'width: 100%;' %>
264
+	     <div class="container" >
265
+		  <div class="row">
266
+			  <div class="span12" style="height: 0px;">
267
+			       <div id="tagline_subscribe2" class="" style="background-color: transparent; position: relative; top: -700px;">
268
+			  		<h1 class="header mobile"><%= (t "landing_page.subscribe_title").html_safe %></h1>
269
+			         
270
+			    </div>
271
+		    </div>
272
+	      </div>
273
+          </div>
274
+	  </div>
275
+  </div>
276
+</div>
277
+
278
+<div class="visible-phone" style="margin-bottom: 80px;">
279
+    <p class="lead" >
280
+	    <%= (t "landing_page.subscribe_text").html_safe %>
281
+    </p>
282
+    <%= bootstrap_form_for(@subscription) do |f| %>
283
+      <%= f.alert_message "Please fix the errors below."%>
284
+      <%= f.form_group :email, style: 'margin-top: -35px;' do %>
285
+        	<%= f.text_field :email, hide_label: true, value: 'Email', class: 'span4', required: true, style: 'height: 50px; font-size: 24px;' %>
286
+      <% end %>
287
+      <%= f.submit (t 'subscription.submit'), class: 'btn btn-large', id: 'submit_subscription' %>
288
+    <% end %>
289
+</div>
169 290
 
170 291
 
171 292
 
@@ -174,7 +295,7 @@
174 295
 
175 296
 <div style="margin-top: 0px;">
176 297
 	<footer class="velvet">
177
-	  <hr style="">
298
+	  <hr style="border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff;">
178 299
 	  
179 300
 	<div class="container nav-collapse">
180 301